{extend name="common/common" /}

{block name="style"}
<style>
#box{
	width: 595px;
	height: 340px;
	overflow: hidden;
	margin: 0 auto;
}
#printBox{
	margin: 0 auto;
	width: 595px;
	height: 340px;
	position: relative;
	z-index: 10;
}
#textBox{
	margin: 0 auto;
	width: 595px;
	height: 340px;
	position: relative;
	background-image:  url("/static/admin/images/AccPrint.png");
	top:-340px;
	z-index: 5;
}
.title{
	position: absolute;
	top:10px;
	left: 230px;
}
.accSn1{
	position: absolute;
}
.accSn2{
	position: absolute;
	top:-5px;
	left:15px;
}
.accSn3{
	position: absolute;
	left:18px;
}
.accSn4{
	position: absolute;
	left:30px;
	top:5px;
	font-size: 18px;
	color:#000;
}
.accSnBox{
	position: relative;
	left: 400px;
	top:10px;
}
input{
	border: 0;
	outline: 0;
	width: 70px;
	height: 29px;
	line-height: 29px;
	text-align: center;
	font-size: 12px;
	color:#000;
}
h3{
	font-size: 12px;
}
.name{
	position: absolute;
	left: 29px;
	top:84px;
}
.nameIn{
	position: absolute;
	left: 70px;
	top:75px;
}
.grade{
	position: absolute;
	left: 29px;
	top:117px;
}
.gradeIn{
	position: absolute;
	left: 70px;
	top:107px;
}
.sex{
	position: absolute;
	left: 165px;
	top:84px;
}
.sexIn{
	position: absolute;
	left: 200px;
	top:75px;
}
.major{
	position: absolute;
	left: 165px;
	top:117px;
}
.majorIn{
	position: absolute;
	left: 195px;
	top:107px;
	width: 80px;
}
.school{
	position: absolute;
	left:279px;
	top:84px;
}
.schoolIn{
	position: absolute;
	left: 332px;
	top:75px;
	width: 200px;
}
.edu{
	position: absolute;
	left:279px;
	top:117px;
}
.eduIn{
	position: absolute;
	left: 340px;
	top:107px;
}
.phone{
	position: absolute;
	left:430px;
	top:117px;
}
.phoneIn{
	position: absolute;
	left: 460px;
	top:107px;
	width: 90px;
}
.details{
	position: absolute;
	left: 50px;
	top:152px;
}
.money{
	position: absolute;
	left: 200px;
	top:152px;
}
.remark{
	color:#000;
	position: absolute;
	left: 410px;
	top:152px;
}
.fee1{
	position: absolute;
	left: 50px;
	top:184px;
}
.fee2{
	position: absolute;
	left: 50px;
	top:212px;
}
.fee3{
	position: absolute;
	left: 50px;
	top:242px;
}
.yuan1{
	position: absolute;
	left: 250px;
	top:184px;
}
.yuan2{
	position: absolute;
	left: 250px;
	top:212px;
}
.yuan3{
	position: absolute;
	left: 250px;
	top:242px;
}
.yuan1In{
	position: absolute;
	left: 170px;
	top:185px;
	height:20px;
	line-height: 20px;
	background: none;
}
.yuan2In{
	position: absolute;
	left: 170px;
	top:213px;
	height:20px;
	line-height: 20px;
	background: none;
}
.yuan3In{
	position: absolute;
	left: 170px;
	top:239px;
	height:20px;
	line-height: 20px;
	background: none;
}
.remarkIn{
	border:0;
	outline: 0;
	resize:none;
	position: absolute;
	left: 300px;
	top:185px;
	width: 250px;
	height: 70px;
	color:#000;
}
.total{
	position: absolute;
	left: 27px;
	top:272px;
}
.totalInCNzh{
	position: absolute;
	left: 95px;
	top:270px;
	text-align: left;
	width: 122px;
	background: none;
}
.totalInNum{
	position: absolute;
	left: 238px;
	top:273px;
	height: 20px;
	line-height: 20px;
	width:55px;
	text-align: left;
	background: none;
}
.yuan4{
	position: absolute;
	left: 220px;
	top:272px;
}
.teacher{
	position: absolute;
	left: 300px;
	top:272px;
}
.depart{
	position: absolute;
	left: 452px;
	top:272px;
}
.teacherIn{
	position: absolute;
	left: 370px;
	top:263px;
}
.departIn{
	position: absolute;
	left: 486px;
	top:263px;
	background: none;
}
.person1{
	position: absolute;
	left: 27px;
	top:302px;
}
.person2{
	position: absolute;
	left: 300px;
	top:302px;
}
.person1In{
	position: absolute;
	left: 105px;
	top:302px;
	height: 20px;
	line-height: 20px;
	text-align: left;
	width:190px;
	background: none;
}
.person2In{
	position: absolute;
	left: 375px;
	top:302px;
	height: 20px;
	line-height: 20px;
	text-align: left;
	width:190px;
	background: none;
}
.leftText1{
	position: absolute;
	top:117px;
	left: 565px;
}
.leftText2{
	position: absolute;
	top:152px;
	left: 565px;
}
.leftText3{
	position: absolute;
	top:164px;
	left: 568px;
}
.leftText4{
	position: absolute;
	top:217px;
	left: 565px;
}
.leftText1In{
	width: 20px;
	height: 20px;
	line-height: 20px;
	position: absolute;
	top:130px;
	left: 562px;
}
.leftText2In{
	width: 20px;
	height: 20px;
	line-height: 20px;
	position: absolute;
	top:175px;
	left: 562px;
}
.leftText3In{
	width: 20px;
	height: 20px;
	line-height: 20px;
	position: absolute;
	top:194px;
	left: 562px;
}
.year{
	position: absolute;
	top:55px;
	left: 250px;
}
.month{
	position: absolute;
	top:55px;
	left: 300px;
}
.date{
	position: absolute;
	top:55px;
	left: 350px;
}
.yearIn{
	width:32px;
	position: absolute;
	top:48px;
	left: 210px;
	height: 16px;
	line-height: 16px;
}
.monthIn{
	width:16px;
	position: absolute;
	top:48px;
	left: 270px;
	height: 16px;
	line-height: 16px;
}
.dateIn{
	width:16px;
	position: absolute;
	top:48px;
	left: 320px;
	height: 16px;
	line-height: 16px;
}
.btnBox{
	text-align: center;
}
.NoIn{
	position: absolute;
	left: 431px;
	top: 9px;
	width: 125px;
	border-bottom: 1px solid #333;
	text-align: left;
	font-size: 16px;
}
</style>
{/block}

{block name="content"}
<div id="box">

<div id="printBox">
	<input class="NoIn" value="{$accInfo.account_sn}"/>
	<input class="nameIn" value="{$stInfo.name|default=''}"/>
	<input class="gradeIn" value="{$grade|default=''}"/>
	<input class="sexIn" value="{$sex|default=''}"/>
	<input class="majorIn" value="{$stInfo.major|default=''}"/>
	<input class="schoolIn" value="{$stInfo.school|default=''}"/>
	<input class="eduIn" value="{$acquisition_mode|default=''}"/>
	<input class="phoneIn" value="{$stInfo.phone|default=''}"/>
	<input class="departIn" value="{$depart|default=''}"/>
	<input class="yuan1In" value="{$accInfo.registration|default=''}"/>
	<input class="yuan2In" value="{$accInfo.tuition|default=''}"/>
	<input class="yuan3In" value="{$accInfo.material_cost|default=''} + {$accInfo.photo_collection|default=''}"/>
	<input class="yearIn" value="{:date('Y')}"/>
	<input class="monthIn" value="{:date('m')}"/>
	<input class="dateIn" value="{:date('d')}"/>
	<textarea class="remarkIn" wrap="hard">{$markIn|default=''}</textarea>
	<input class="totalInNum" value="{$everyTotal|default=''}"/>
	<input class="totalInCNzh" value="{$bigMoney|default=''}"/>
	<input class="teacherIn" value="{$first_relation|default=''}"/>
	<input class="person1In" value="{$writer|default=''}"/>
	<input class="person2In" value="{$agent|default=''}"/>
</div>
<div id="textBox">
	<h2 class="text-center title">学员缴费单</h2>
	<div class="accSnBox">
		<h2 class="text-center accSn1">N</h2>
		<h2 class="text-center accSn2">o</h2>
		<h2 class="text-center accSn3">.</h2>
	</div>
	<h3 class="name">姓名</h3>
	<h3 class="grade">层次</h3>
	<h3 class="sex">性别</h3>
	<h3 class="major">专业</h3>
	<h3 class="school">报读学校</h3>
	<h3 class="edu">学历形式</h3>
	<h3 class="phone">电话</h3>
	<h3 class="details">缴费明细</h3>
	<h3 class="money">金额</h3>
	<h3 class="remark">备注</h3>
	<h3 class="fee1">报名费</h3>
	<h3 class="fee2">学费</h3>
	<h3 class="fee3">教材费+照片费</h3>
	<h3 class="yuan1">元</h3>
	<h3 class="yuan2">元</h3>
	<h3 class="yuan3">元</h3>
	<h3 class="yuan4">￥:</h3>
	<h3 class="total">合计(大写)</h3>
	<h3 class="teacher">咨询老师</h3>
	<h3 class="depart">部门</h3>
	<h3 class="person1">填单人</h3>
	<h3 class="person2">收款人</h3>
	<h3 class="leftText1">第</h3>
	<h3 class="leftText2">联</h3>
	<h3 class="leftText3">：</h3>
	<h3 class="leftText4">联</h3>
	<h3 class="year">年</h3>
	<h3 class="month">月</h3>
	<h3 class="date">日</h3>
</div>
</div>

<hr>
<h4 class="text-center">打印预览</h4>
<!--startprint-->
<div id="doPrintBox" style="margin:0 auto;width:595px;height:340px;background-color:#FFF;"></div>
<!--endprint-->
<hr>
<div class="btnBox">
	<a class="btn btn-success" id="toPrint"><i class="fa fa-print"></i>打印内容</a>
	<a class="btn btn-success" id="allPrint"><i class="fa fa-print"></i>打印全部</a>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__JS__/html2canvas.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#toPrint").click(function(){
		var printBox = document.getElementById('printBox');
		var doPrintBox = document.getElementById('doPrintBox');
	    var width = printBox.offsetWidth;
	    var height = printBox.offsetHeight;
	    var canvas = document.createElement("canvas");
	    var scale = 2;
	    canvas.width = width * scale;
	    canvas.height = height * scale;
	    canvas.getContext("2d").scale(scale, scale);
		var opts = {
		    scale: scale,
		    canvas: canvas,
		    logging: true,
		    width: width,
		    height: height
		};
		html2canvas(printBox, opts).then(function (canvas) {
	        var context = canvas.getContext('2d');

	        src = canvas.toDataURL("image/png");
			doPrintBox.innerHTML = '<img width="595" height="340" src="'+src+'">';
	    });
		setTimeout(function(){
			bdhtml=window.document.body.innerHTML;
		   	sprnstr="<!--startprint-->";
		   	eprnstr="<!--endprint-->";
		   	prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
		   	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
		   	window.document.body.innerHTML=prnhtml;
		   	window.print();
		},1500);
	});
	$("#allPrint").click(function(){
		var printBox = document.getElementById('box');
		var doPrintBox = document.getElementById('doPrintBox');
	    var width = printBox.offsetWidth;
	    var height = printBox.offsetHeight;
	    var canvas = document.createElement("canvas");
	    var scale = 2;
	    canvas.width = width * scale;
	    canvas.height = height * scale;
	    canvas.getContext("2d").scale(scale, scale);
		var opts = {
		    scale: scale,
		    canvas: canvas,
		    logging: true,
		    width: width,
		    height: height
		};
		html2canvas(printBox, opts).then(function (canvas) {
	        var context = canvas.getContext('2d');

	        src = canvas.toDataURL("image/png");
			doPrintBox.innerHTML = '<img width="595" height="340" src="'+src+'">';
	    });
		setTimeout(function(){
			bdhtml=window.document.body.innerHTML;
		   	sprnstr="<!--startprint-->";
		   	eprnstr="<!--endprint-->";
		   	prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
		   	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
		   	window.document.body.innerHTML=prnhtml;
		   	window.print();
		},1500);
	});
});


</script>
{/block}
